<template>
	<header>
		<!-- 轮播  -->
		<div class="carousel">
			<swiper auto loop dots-position='center' height='1.35rem'>
				<swiper-item><img src="../../assets/22_gchs_or78.jpg" /></swiper-item>
				<swiper-item><img src="../../assets/22_gchs.jpg" /></swiper-item>
				<div class="carText"><p>专 业 培 训 通 向 成 功 而 奋斗</p><h1>顶级名师权威辅导</h1></div>
		    </swiper>
		</div> 
    </header>
</template>

<script>
	import { Swiper, SwiperItem } from 'vux'
	export default{
		components : {
			Swiper,SwiperItem
		},
		data() {
			return {
				menu : false,
     		}
		},
		methods : { 
			menus (){
				this.menu = !this.menu;
			},
		}
	}
	
</script>
<style type="text/css">
	

	header li{
		clear:both; 
	}
	.carousel{
		clear:both; height:1.35rem; position:relative;
	}
	.carousel img{
		width:100%; height:1.35rem;
	}
	.carousel .vux-slider .vux-icon-dot.active{
		background-color:#89be2e !important;
	}
	.carousel .carText{
		position:absolute; color:#fff; background:rgba(137, 190, 46,0.8); width:2.18rem; height:0.7rem; margin:10% 15%; text-align:center;
	}
	.carousel .carText p{
		margin:0.04rem auto; 
	}
	.carousel .carText h1{
		font-size:0.22rem;
	}
	.vux-slider .vux-indicator a .vux-icon-dot{
		width:0.06rem !important; height:0.06rem !important; border-radius:0.04rem;
	}

</style>